<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无1档</title>
	<!--书写样式-->
	<style>
		html{
			height: 100%;
		}
	body
		{background: url('images/bg.jpg') no-repeat;
			background-size:  100%;
			height: 100%;
		}
		div{
			width:  995px;
		    height: 555px;
/*			background: lime;*/
			margin:40px auto;
			position: relative;
		}
		ul{
			width:  995px;
		    height: 555px;
/*			background: lime;*/
			margin:40px auto;
/*			消除默认格式*/
		    padding: 0px;
			list-style: none;
			position: relative;
		}
/*		选择所有li*/
		li{
			height: 133px;
			width: 193px;
/*			子集绝对定位，父级相对定位*/
			opacity: 0.5;
		}
/*		选择第一个li*/
		li:nth-of-type(1){
			position: absolute;
			left: 0px;
			top: 0px;

		}
		li:nth-of-type(2){
			position: absolute;
			left: 200px;
			top: 0px;

		}
		li:nth-of-type(3){
			position: absolute;
			left: 400px;
			top: 0px;
		}
		li:nth-of-type(4){
			position: absolute;
			left: 600px;
			top: 0px;

		}
		li:nth-of-type(5){
			position: absolute;
			left: 800px;
			top: 0px;

		}
		li:nth-of-type(6){
			position: absolute;
			left: 0px;
			top: 140px;

		}
		li:nth-of-type(7){
			position: absolute;
			left: 0px;
			top: 280px;

		}
		li:nth-of-type(8){
			position: absolute;
			left: 0px;
			top: 420px;

		}
		li:nth-of-type(9){
			position: absolute;
			left: 200px;
			top: 420px;

		}
		li:nth-of-type(10){
			position: absolute;
			left: 400px;
			top: 420px;

		}
        li:nth-of-type(11){
			position: absolute;
			left: 600px;
			top: 420px;

		}
		li:nth-of-type(12){
			position: absolute;
			left: 800px;
			top: 420px;

		}
		li:nth-of-type(13){
			position: absolute;
			left: 800px;
			top: 280px;

		}
		li:nth-of-type(14){
			position: absolute;
			left: 800px;
			top: 140px;

		}
		#btn{position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
/*			鼠标移进去变小手*/
			cursor: pointer;
			}
/*		伪对象在div内部增加了标签*/
		div::after{
/*			div里面的内容*/
			content: '抽 奖';
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			color: white;
			font-size: 40px;
			cursor: pointer;
		}
		.current{opacity: 1;} 	

	</style>
</head>

<body>

<!--	最外层的布局-->
	<div>
		<ul>
		<li class="current">
		<img src="images/01.jpg" alt="">
		</li>
		<li>
		<img src="images/02.jpg" alt="">
		</li>
		<li>
		<img src="images/03.jpg" alt="">
		</li>
		<li>
		<img src="images/04.jpg" alt="">
		</li>
		<li>
		<img src="images/05.jpg" alt="">
		</li>
		<li>
		<img src="images/06.jpg" alt="">
		</li>
		<li>
		<img src="images/07.jpg" alt="">
		</li>
		<li>
		<img src="images/08.jpg" alt="">
		</li>
		<li>
		<img src="images/09.jpg" alt="">
		</li>
		<li>
		<img src="images/10.jpg" alt="">
		</li>
		<li>
		<img src="images/11.jpg" alt="">
		</li>
		<li>
		<img src="images/12.jpg" alt="">
		</li>
			<li>
		<img src="images/13.jpg" alt="">
		</li>
			<li>
		<img src="images/14.jpg" alt="">
		</li>
			
			
		</ul>
<!--随机图片-->
                   <!--点击按钮 id给标签增加id名-->
				<img src="images/btn_bg.jpg" alt="" id="btn">
	</div>
<!--	js放在script内部，在body底部-->
	
	<script>
		var i=0;
//通过标签名获取标签，选择到具体某一个：标签吗【索引】
		var tags=document.getElementsByTagName('li');
//点击按钮
		btn.onclick=function(){
//setInterval(function(){执行的代码}，时间)
//点击事件
       setInterval(function(){
	     i=i+1;
//	其余删除
//	增加类名
	      tags[i].className='current';
          },600)
							  
				   }
	</script>
</body>
</html>
